<template>
  <div class="user_collect">
    <div class="title_nav">
      <h3 style="color:gray">我的收藏</h3>
    </div>
    <div class="collect_list">
      <ul>
        <li>
          <span class="id"><svg class='icon' aria-hidden='true'>
            <use xlink:href='#icon-bianhao'></use>
          </svg> 编号</span>
          <span class="title"><svg class='icon' aria-hidden='true'>
            <use xlink:href='#icon-fabiaopinglun'></use>
          </svg> 标题</span>
          <span class="operate"><svg class='icon' aria-hidden='true'>
            <use xlink:href='#icon-shezhi'></use>
          </svg> 操作</span>
        </li>
        <li v-for="item in res" :key="item.articleid">
          <span class="id">{{getIndex(item.articleid)}}</span>
          <span class="title">{{item.title}}</span>
          <span class="operate">
            <a :href="'/article/' + item.articleid" title="查看" target="_blank" class="btn btn_blue">
              <svg class='icon' aria-hidden='true'>
                <use xlink:href='#icon-chakan'></use>
              </svg>查看
            </a>
            <a href="JavaScript:;" @click="removeCollect(item.articleid)" title="取消收藏" class="btn btn_red">
              <svg class='icon' aria-hidden='true'>
                <use xlink:href='#icon-shanchu'></use>
              </svg>删除
            </a>
          </span>
        </li>
        <li v-if="!collectData.length" class="hint"><span>暂无结果</span></li>
      </ul>
      <paging-vue :result="collectData" @result="showRes"></paging-vue>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex"
import pagingVue from "../info/mini/paging.vue"
export default {
  name: 'Collect',

  data() {
    return {
      collectData: [], // 所有收藏数据集
      res: [] // 展示收藏数据集
    };
  },

  computed:{
    getIndex(){
      return (index) => this.collectData.map((v) => v.articleid).indexOf(index) + 1 
    },
  },

  mounted() {
    this.init()
  },

  methods: {
    // 初始化
    init(){
      this.$api.getUserCollect().then(res => {
        this.collectData = res.data
      })
    },
    // 取消收藏
    removeCollect(id){
      this.$api.isCollect({id}).then(res => {
        if(res == 0){
          this.showHint({isFlag:true,title:'已取消'})
          this.collectData = this.collectData.filter(v => v.articleid != id)
        }else{
          this.removeCollect(id)
        }
      })
    },
    // 显示数据
    showRes(res){
      this.res = res
    },
    ...mapActions(['showHint'])
  },
  components: {
    pagingVue
  }
};
</script>

<style scoped>
.collect_list ul{
  border: 1px solid gray;
}
.collect_list li{
  display: flex;
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-top: 1px solid gray;
}
.collect_list li:nth-child(1){
  background-color: green;
  color: white;
}
.collect_list li .id,.collect_list li .operate{
  width: 60px;
  text-align: center;
}
.collect_list li .operate{
  width: 160px;
}
.collect_list li .title{
  flex: 1;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  padding-left: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.collect_list .hint{
  justify-content: center;
  color: gray;
}
@media screen and (max-width: 800px){
  .user_collect{
    padding: 10px;
  }
}
</style>